/*var.less主要用于定义公共mixin*/
/*注意！请不要放实际样式，只能放公共mixin*/

// 动画mixin
@import "var.less";
@import "animate.less";

.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}


.hairline(@position, @color) when (@position =top) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 3;
    transform-origin: 50% 0%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =left) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 3;
    transform-origin: 0% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleX(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =bottom) {
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 3;
    transform-origin: 50% 100%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =right) {
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 3;
    transform-origin: 100% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleX(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(0.33);
    }
  }
}

.scrollable() {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

//内容水平垂直居中
.h_v_center() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

//不换行，多余...
.display_a_line() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nativeScroll{
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
    scrollbar-arrow-color: #000;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0);
    scrollbar-arrow-color: rgba(0, 0, 0, 0);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
}

.pointer{
  cursor: pointer;
}
.pointer-outline{
  cursor: pointer;
}
.pointer-outline:hover{
  text-decoration: #0e0e5a ;
}
